<template>
  <div>
    <header class="header-nav">
      <span @click="handleClick(405)">学院新闻</span>
      <span @click="handleClick(406)">党建动态</span>
      <span @click="handleClick(407)">通知公告</span>
      <span @click="handleClick(408)">分院动态</span>
    </header>
    <news-list :list-data="listData"></news-list>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import axios from "axios";
import NewsList from "../news/news-list.vue";

const listData = reactive<any>([]);

function handleClick(id: number) {
  axios({
    url: "http://HKF-WORK-PC:8082/content/queryList",
    data:  { t_cat_plant_fk: id, rows: 10 },
    method: "post"
  }).then(res => {
    // 清空数组中原有的成员
    listData.length = 0;
    listData.push(...res.data.result_data);
  });
}
</script>

<style scoped>
    .header-nav>span {
        margin-right: 10px;
    }
</style>